<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>教师查看班级考勤页</title>
    <style type="text/css">
        ul li
        {
            list-style:none;


        }

        </style>
    <!-- Icons -->
    <link href="vendors/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/css/simple-line-icons.min.css" rel="stylesheet">
    <link href="vendors/css/attendance.css" rel="stylesheet">
    <link href="vendors/css/attence.css" rel="stylesheet">
    <link href="vendors/css/previewfile.css" rel="stylesheet">
    <link href="vendors/css/sprites.css" rel="stylesheet">
    <!-- Main styles for this application -->
    <link href="vendors/css/style.css" rel="stylesheet">
    <!-- Styles required by this views -->

    <style type="text/css">/* Chart.js */
    @-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style>
</head>
<body>


<div class="card-body">
    <div class="jumbotron">



        <p class="float-left">班级人数：6</p>
        <p class="text-center"> 平均出勤率：100%</p>

        <hr>
<div class="card-body">
    <table class="table table-responsive-sm table-bordered table-striped table-sm">
        <thead>
        <tr>
            <th>全部成员</th>
            <th>学号</th>
            <th>2018.04.30</th>
            <th>2018.04.24</th>
            <th>第一次考勤</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>庄同学</td>
            <td>201506110156</td>

            <td>
            <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="a" value="出勤" id="a">
            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="b" value="出勤" id="b">

            </td>
            <td>

                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="c" value="出勤" id="c">

            </td>
        </tr>
        <tr>
            <td>符同学</td>
            <td>201506110157</td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="d" value="出勤" id="d">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="e" value="出勤" id="e">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="f" value="出勤" id="f">

            </td>
        </tr>
        <tr>
            <td>罗同学</td>
            <td>201506110177</td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="g" value="出勤" id="g">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="h" value="出勤" id="h">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="i" value="出勤" id="i">

            </td>
        </tr>
        <tr>
            <td>邓同学</td>
            <td>201506110193</td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="j" value="出勤" id="j">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="k" value="出勤" id="k">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="l" value="出勤" id="l">

            </td>
        </tr>
        <tr>
            <td>林同学</td>
            <td>201506110155</td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="n" value="出勤" id="n">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="m" value="出勤" id="m">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="o" value="出勤" id="o">

            </td>
        </tr>
        <tr>
            <td>区同学</td>
            <td>201506110183</td>
            <td>
                <input type="button"  class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="p" value="出勤" id="p">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="q" value="出勤" id="q">

            </td>
            <td>
                <input type="button" class="btn btn-info" data-toggle="modal" data-target="#primaryModal" data-id="i" value="出勤" id="i">

            </td>
        </tr>
        </tbody>
    </table>
    <nav>
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Prev</a></li>
            <li class="page-item active">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>
</div>
<div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-info" role="document">
        <div class="modal-content">
            <div  class="modal-header">
                <h4 class="modal-title">变更考勤状态</h4>
                <button   type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div style=" margin: 0px auto;" class="attenceChangeDialog">
                <ul>
                    <li onclick="changeclass" id="ok" class="active">
                        <i class="ok"></i>
                        <i class="tips">出勤</i>
                    </li>
                    <li onclick="changeclass" id="no" class="">
                        <i class="no"></i>
                        <i class="tips">缺勤</i>
                    </li>
                    <li onclick="changeclass" id="late" class="">
                        <i class="late"></i>
                        <i class="tips">迟到</i>
                    </li>
                    <li onclick="changeclass" id="parse" class="">
                        <i class="parse"></i>
                        <i class="tips">请假</i>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info" id="btn">Save changes</button>
            </div>
        </div>

    </div>

</div>







    </div>
</div>

</body>

<script src="vendors/js/jquery.min.js"></script>
 <script src="vendors/js/popper.min.js"></script>
 <script src="vendors/js/bootstrap.min.js"></script>
 <script src="vendors/js/pace.min.js"></script>
 <script src="vendors/js/Chart.min.js"></script>
<script src="vendors/js/attendanceV2.js"></script>
 <script src="vendors/js/app.js"></script>
<script>
var attendance;
var id;
$('#primaryModal').on('show.bs.modal',function(event) {
    var button = $(event.relatedTarget)
    id= button.data('id')

});
$("#late").click(function () {
    $(this).attr('class','active');
    $("#ok").removeClass();
    $("#no").removeClass();
    $("#parse").removeClass();
    attendance="迟到";

})


$("#ok").click(function () {
    $(this).attr('class','active');
    $("#late").removeClass();
    $("#no").removeClass();
    $("#parse").removeClass();
    attendance="出勤";


})

$("#no").click(function () {
    $(this).attr('class','active');
    $("#ok").removeClass();
    $("#late").removeClass();
    $("#parse").removeClass();
    attendance="缺勤";


})

$("#parse").click(function () {
    $(this).attr('class','active');
    $("#ok").removeClass();
    $("#no").removeClass();
    $("#late").removeClass();
    attendance="请假";


})

$("#btn").click(function () {
  $("#primaryModal").modal('hide');
   var ok=$("#ok").attr('class');
    var late=$("#late").attr('class');
    var no=$("#no").attr('class');
    var parse=$("#parse").attr('class');
   $("#"+id+"").val(attendance);
})
 /* $('#primaryModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var tempEvent = button.data('event');

        var modal = $(this);
        modal.find(".attenceChangeDialog ul li.active").removeClass('active');
        modal.find('#parse').removeClass('active');
        modal.find('#no').removeClass('active');
        modal.find('#late').removeClass('active');



        modal.find('#'+tempEvent).addClass('active');


    });



*/



    /*$('#primaryModal').find(".attenceChangeDialog ul li").on("click",function()
    {
         $(layero).find(".attenceChangeDialog ul li.active").removeClass("active");
         $(this).addClass("active")})
}
*/



 /* $('#primaryModal').on('show.bs.modal', function (event)  {
    $(".attenceChangeDialog ul li").click(function () {
        var button = $(event.relatedTarget);
        var tempEvent = button.data('event');
        var modal = $(this);
        modal.find("#ok").removeClass('active');
        modal.find('#parse').removeClass('active');
        modal.find('#no').removeClass('active');
        modal.find('#late').removeClass('active');

        modal.find('#'+tempEvent).addClass('active');

    })
    
})
  */



  /*$('#primaryModal').on('show.bs.modal',function() {

  $(this).find(".attenceChangeDialog ul li").on("click",function(){$(this).find(".attenceChangeDialog ul li.active").removeClass("active")
      $(this).addClass("active")})
      */

 /*function changeclass()
 {
     document.getElementById(id).class = "active"

 }*/

</script>


</body>
</html>
